﻿@model NWNT.Web.Models.QuestionAreaModel
@{
    ViewBag.Title = "QuestionArea";
}


        @*public int QuestionAreaId { get; set; }
        public string Area { get; set; }
        public string Description { get; set; }
        public int Order { get; set; }
        public IEnumerable<QuestionOptionsModel> QuestionOptions { get; set; }
        public IEnumerable<int> SelectedQuestionOptions { get; set; }*@



<div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                Area
            </div>
            <div class="editor-field">
                
                <input type="text" data-bind="value : $root.area" />
                @*@Html.TextBoxFor(m => m.Area)
                @Html.ValidationMessageFor(m => m.Area)*@
            </div>

            <div class="editor-label">
                Description
            </div>
            <div class="editor-field">
                <input type="text" data-bind="value : $root.description" />
               @* @Html.TextBoxFor(m => m.Description)
                @Html.ValidationMessageFor(m => m.Description)*@
            </div>

            <div class="editor-label">
            </div>
            @*<pre data-bind="text: ko.toJSON($root.questionOptions, null, 2)"></pre>*@
            
            <table>
                <tr>
                    <td>All Options</td>
                    <td>Selected Options</td>
                </tr>
                <tr>
                    <td>
                        <table>
                            <tbody data-bind="foreach: $root.questionOptions">
                                    <tr>
                                    <td>
                                        <label>
                                            <input type="checkbox" data-bind="value: $data.Optionid, checked: $root.selectedQuestionOptionArray" />
                                            <span data-bind="text: OptionName"></span>
                                        </label>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <table>
                            <tbody data-bind="foreach: $root.selectedQuestionOption">
                                <tr data-bind="click: $root.selectRow, css: $root.selectedRowNo() === $root.selectedQuestionOption().indexOf($data) ? 'selectedRow' : 'unSelectedRow'">
                                    <td><label data-bind="text: OptionName"></label>
                                        <input type="text" data-bind="value:text" style="width:40px;" />
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td>
                                        <a href="javascript:void(0)" data-bind="click: moveUp, visible: $root.moveUpEnable">Move Up</a><br />
                                        <a href="javascript:void(0)" data-bind="click: moveDown, visible: $root.moveDownEnable">Move Down</a>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </td>
                </tr>
            </table>
            <p>
                <input type="submit" data-bind="value: $root.questionAreaId==0?'Save':'Update', click:$root.save" />
            </p>
        </fieldset>
    </div>
<script type="text/javascript">
    var data = [@Html.Raw(Json.Encode(Model))];
    data = data[0];
    function QuestionArea(data) {

        for (var i = 0; i < data.QuestionOptions.length; i++) {
            data.QuestionOptions[i]['text'] = "";
            
        }
        self = this;
        self.questionAreaId = data.QuestionAreaId;
        self.area = ko.observable(data.Area);
        self.description = ko.observable(data.Description);

        self.questionOptions = ko.observableArray(data.QuestionOptions);
        self.selectedQuestionOptionArray = ko.observableArray($linq(data.SelectedQuestionOptions).select('e=>String(e)').array);
        self.selectedQuestionOption = ko.observableArray(function () {
            var options = [];
            for (var i = 0; i < self.selectedQuestionOptionArray().length ; i++) {
                var item = $linq(self.questionOptions()).where('e=>Number(e.Optionid)===' + self.selectedQuestionOptionArray()[i].toString()).array[0];
                item.text = data.SelectedQuestionOptionsScores[i].toString();
                options.push(item);
            }
            return options;
        }());
        self.selectedQuestionOptionArray.subscribe(selectionChanged);
        self.selectedRowNo = ko.observable(-1);
        self.moveUp = function () {
            var itemToMoveUp = self.selectedQuestionOption()[self.selectedRowNo()];
            var itemToMoveDown = self.selectedQuestionOption()[self.selectedRowNo() - 1];
            self.selectedQuestionOption()[self.selectedRowNo() - 1] = itemToMoveUp;
            self.selectedQuestionOption()[self.selectedRowNo()] = itemToMoveDown;
            self.selectedRowNo(self.selectedRowNo() - 1);
            self.selectedQuestionOption.valueHasMutated();
        };
        self.moveUpEnable = ko.computed(function () {
            return self.selectedRowNo() > 0 && self.selectedRowNo() !== -1;
        });
        self.moveDown = function () {
            var itemToMoveUp = self.selectedQuestionOption()[self.selectedRowNo() + 1];
            var itemToMoveDown = self.selectedQuestionOption()[self.selectedRowNo()];
            self.selectedQuestionOption()[self.selectedRowNo() + 1] = itemToMoveDown;
            self.selectedQuestionOption()[self.selectedRowNo()] = itemToMoveUp;
            self.selectedRowNo(self.selectedRowNo() + 1);
            self.selectedQuestionOption.valueHasMutated();
        };
        self.moveDownEnable = ko.computed(function () {
            return self.selectedRowNo() < self.selectedQuestionOption().length - 1 && self.selectedRowNo() !== -1;
        });
        self.selectRow = function (context) {
            if (self.selectedQuestionOption()) {
                self.selectedRowNo(self.selectedQuestionOption().indexOf(context));
                return true;
            }
            return true;
        };
        self.save = function () {
            data.SelectedQuestionOptions = $linq(self.selectedQuestionOption()).select('e=>Number(e.Optionid)').array;
            data.SelectedQuestionOptionsScores = $linq(self.selectedQuestionOption()).select('e=>Number(e.text)').array;
            data.Area = self.area();
            data.Description = self.description();
            var url = '../api/Master/UpdateQuestionArea';
            $.ajax({
                type: "POST",
                url: url,
                data: JSON.stringify(data),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (a, b, c) {
                    var test = '';
                },
                error: function (a, b, c) {
                    var test1 = '';
                }
            });
        };

        function selectionChanged(newValue, context) {
           // var data = newValue;
            var ids = $linq(self.selectedQuestionOption()).select('e=>String(e.Optionid)').array;

            if (newValue.length > self.selectedQuestionOption().length) {
                for (var i = 0; i < newValue.length; i++) {
                    if (ids.indexOf(newValue[i]) === -1) {
                        self.selectedQuestionOption.push($linq(self.questionOptions()).where('e=>String(e.Optionid)==="' + newValue[i] + '"').array[0]);
                    }
                }
            }
            else if (newValue.length < self.selectedQuestionOption().length) {
                for (var i = 0; i < ids.length; i++) {
                    if (newValue.indexOf(String(ids[i])) === -1) {
                        $linq(self.selectedQuestionOption()).where('e=>Number(e.Optionid)===' + ids[i]).array[0].text = "";
                        self.selectedQuestionOption.splice($linq(self.selectedQuestionOption()).select('e=>String(e.Optionid)').array.indexOf(ids[i]), 1);
                    }
                }
            }
        }


    }
    var viewModel = new QuestionArea(data);
    ko.applyBindings(viewModel);




</script>









@*<h2>QuestionArea</h2>
@using (Html.BeginForm("QuestionArea", "Home", FormMethod.Post))
{
    @Html.HiddenFor(m => m.QuestionAreaId)
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                Area
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Area)
                @Html.ValidationMessageFor(m => m.Area)
            </div>

            <div class="editor-label">
                Description
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Description)
                @Html.ValidationMessageFor(m => m.Description)
            </div>

            <div class="editor-label">
            </div>

            <p>
                <input type="submit" value="Submit" />
            </p>
        </fieldset>
    </div>
}*@


